<template>
	<view>
		<uni-card :is-shadow="false" :border="false">
			<view>			
				<u--form labelPosition="left" :model="dataForm" ref="form" :labelWidth="150">
					<u-form-item label="旧密码" prop="password" borderBottom>
						<u--input type="password" v-model="dataForm.password" border="none" placeholder="请输入旧密码"></u--input>
					</u-form-item>
					<u-form-item label="新密码" prop="newPassword" borderBottom>
						<u--input type="password" v-model="dataForm.newPassword" border="none" placeholder="请输入新密码"></u--input>
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmPassword" borderBottom>
						<u--input type="password" v-model="dataForm.confirmPassword" border="none" placeholder="请输入确认密码"></u--input>
					</u-form-item>
				</u--form>
				<view class="p_btn">
					<button type="primary" @click="onSubmit">提交</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
import {usePasswordApi} from '@/api/user';
	
export default {
	data() {
		return {
			dataForm: {
				password: "",
				newPassword: "",
				confirmPassword: ""
			},
			rules: {
				password: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					}
				],
				newPassword: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					}
				],
				confirmPassword: [
					{
						required: true,
						message: '必填项不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return value === this.dataForm.newPassword;
						},
						message: '新密码与确认密码不一致'
					}
				]
			}
		};
	},
	onReady() {
		// 需要在onReady中设置规则
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		onSubmit(){
			this.$refs.form.validate().then(res => {
				usePasswordApi(this.dataForm).then(res =>{
					uni.$u.toast('修改成功！')
				})
				
			})
		}
	}
}
</script>

<style lang="scss">
.p_avatar{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
}
.p_btn{
	margin-top: 50rpx;
}
</style>
